<template>
  <!-- #ifdef APP-NVUE -->
  <view class="tui-modal__container" @touchmove.stop.prevent @click="handleClickCancel">
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <view class="tui-modal__container" :class="[show ? 'tui-modal-show' : '']" :style="{zIndex:zIndex}" @touchmove.stop.prevent>
      <!-- #endif -->
      <view
        class="tui-modal-box"
        :style="{ width: width, padding: padding, borderRadius: radius, backgroundColor: backgroundColor,zIndex:zIndex+1 }"
        :class="[fadeIn || show ? 'tui-modal-normal' : 'tui-modal-scale', show ? 'tui-modal-show' : '']"
        @click.stop="stop"
      >
        <view v-if="!custom">
          <view v-if="title" class="tui-modal-title flex-row flex-center">
            <text class="text-32 text-bold color-t1">{{ title }}</text>
          </view>
          <view class="tui-modal-content">
            <view class="text-center">
              <text class="color-t3 text-28 text-center" :style="{ color: color, fontSize: size + 'rpx' }">{{ content }}</text>
            </view>
            <slot />
          </view>
          <view class="tui-modalBtn-box flex-row align-center justify-between" :class="[button.length != 2 ? 'tui-flex-column' : '']">
            <button
              v-for="(item, index) in button"
              :key="index"
              :class="[
                'tui-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
                button.length != 2 ? 'tui-btn-width' : '',
                button.length > 2 ? 'tui-mbtm' : '',
                shape == 'circle' ? 'tui-circle-btn' : ''
              ]"
              :hover-class="'tui-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
              class="tui-modal-btn"
              @click.prevent.stop="handleClick(index)"
            >
              <text class="text-32" :class="['tui-' + (item.type || 'primary') + '-text']">{{ item.text || '确定' }}</text>
            </button>
          </view>
        </view>
        <view v-else><slot /></view>
      </view>
      <!-- #ifndef APP-NVUE -->
      <view class="tui-modal-mask" :class="[show ? 'tui-mask-show' : '']" :style="{zIndex:maskZIndex}" @tap="handleClickCancel" />
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  name: 'TuiModal',
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '592rpx'
    },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    padding: {
      type: String,
      default: '32rpx'
    },
    radius: {
      type: String,
      default: '20rpx'
    },
    // 标题
    title: {
      type: [String, null],
      default: ''
    },
    // 内容
    content: {
      type: [String, null],
      default: ''
    },
    // 内容字体颜色
    color: {
      type: String,
      default: '#999'
    },
    // 内容字体大小 rpx
    size: {
      type: Number,
      default: 28
    },
    // 形状 circle, square
    shape: {
      type: String,
      default: 'square'
    },
    button: {
      type: Array,
      default: () => {
        return [
          {
            text: '取消',
            type: 'gray',
            plain: false // 是否空心
          },
          {
            text: '确定',
            type: '',
            plain: false
          }
        ]
      }
    },
    // 点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 淡入效果，自定义弹框插入input输入框时传true
    fadeIn: {
      type: Boolean,
      default: false
    },
    // 自定义弹窗内容
    custom: {
      type: Boolean,
      default: false
    },
    // 容器z-index
    zIndex: {
      type: Number,
      default: 9997
    },
    // mask z-index
    maskZIndex: {
      type: Number,
      default: 9990
    }
  },
  data() {
    return {}
  },
  methods: {
    stop(e) {
      e.stopPropagation()
    },
    handleClick(index) {
      if (!this.show) return
      this.$emit('click', {
        index
      })
    },
    handleClickCancel() {
      if (!this.maskClosable) return
      this.$emit('update:show', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
.tui-modal__container {
  @include position(fixed,0,0,0,0);
	display: flex;
	align-items: center;
	justify-content: center;
  /*#ifndef APP-NVUE*/
	visibility: hidden;
  /*#endif*/
}
.tui-modal-box {
	position: relative;
	opacity: 0;
  /*#ifndef APP-NVUE*/
	visibility: hidden;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  /*#endif*/
}

.tui-modal-scale {
	transform: scale(0);
}

.tui-modal-normal {
	transform: scale(1);
}
.tui-modal-show {
	opacity: 1;
  /*#ifndef APP-NVUE*/
	visibility: visible;
  /*#endif*/
}

.tui-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
  /*#ifndef APP-NVUE*/
	visibility: hidden;
  transition: all 0.3s ease-in-out;
  /*#endif*/
}

.tui-mask-show {
  /*#ifndef APP-NVUE*/
	visibility: visible;
  /*#endif*/
	opacity: 1;
}

.tui-modal-title {
	padding-top: 24rpx;
  margin-bottom: 32rpx;
}

.tui-modal-content {
  margin-top: 24rpx;
	padding-bottom: 56rpx;
}

.tui-mtop {
	margin-top: 30rpx;
}

.tui-mbtm {
	margin-bottom: 30rpx;
}

.tui-modalBtn-box {
	width: 528rpx;
}

.tui-flex-column {
	flex-direction: column;
}

.tui-modal-btn {
	width: 248rpx;
	height: 88rpx;
	line-height: 88rpx;
	position: relative;
	border-radius: 8rpx;
	font-size: 32rpx;
  /*#ifndef APP-NVUE*/
	overflow: visible;
  /*#endif*/
	margin-left: 0;
	margin-right: 0;
  border-width:0;
}

/*#ifndef APP-NVUE*/
.tui-modal-btn::after {
	content: ' ';
	position: absolute;
	width: 200%;
	height: 200%;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5) translateZ(0);
	left: 0;
	top: 0;
	border-radius: 20rpx;
	z-index: 2;
  border:none;
}
/*#endif*/

.tui-btn-width {
	width: 80% !important;
}

.tui-primary {
	background-image: $color-background-button;
}

.tui-primary-text{
  color: $font-color-button;
}

.tui-primary:active {
  background-image: $color-background-button-hover;
}

.tui-primary-hover {
	background-image: $color-background-button-hover;
}

.tui-primary-outline {
	color: $color-primary;
	background: transparent;
  border-width:0;
}

/*#ifndef APP-NVUE*/
.tui-primary-outline::after {
	border: none;
}
/*#endif*/

.tui-danger {
	background: $color-error;
	color: #FFFFFF;
}

.tui-danger-hover {
	background: $color-error;
	color: #e5e5e5;
}

.tui-danger-outline {
	color: #ed3f14;
	background: transparent;
  border: 1px solid #ed3f14;
}

.tui-red {
	background: #e41f19;
	color: #FFFFFF;
}

.tui-red-hover {
	background: #c51a15;
	color: #e5e5e5;
}

.tui-red-outline {
	color: #e41f19;
	background: transparent;
  border: 1px solid #e41f19;
}

.tui-warning {
	background: $color-warning;
	color: #FFFFFF;
}

.tui-warning-hover {
	background: $color-warning;
	color: #e5e5e5;
}

.tui-warning-outline {
	color: #ff7900;
	background: transparent;
  border: 1px solid #ff7900;
}

.tui-green {
	background: $color-success;
	color: #FFFFFF;
}

.tui-green-hover {
	background: $color-success;
	color: #e5e5e5;
}

.tui-green-outline {
	color: #19be6b;
	background: transparent;
  border: 1px solid #19be6b;
}

.tui-white {
	background: #FFFFFF;
	color: #333;
}

.tui-white-hover {
	background: #f7f7f9;
	color: #666;
}

.tui-white-outline {
	color: #333;
	background: transparent;
  border: 1px solid #333;
}

.tui-gray {
  background-image: linear-gradient(to right, $color-background,$color-background);
}

.tui-gray-text{
  color: $font-color-t3;
}

.tui-gray:active {
  background-image: linear-gradient(to right, #d5d5d5,#d5d5d5);
}

.tui-gray-hover {
  background-image: linear-gradient(to right, #d5d5d5,#d5d5d5);
}

.tui-gray-outline {
	color: $font-color-t3;
	background: $color-background;
  border-width:0;
}

/*#ifndef APP-NVUE*/
.tui-gray-outline::after {
	border: none;
}
/*#endif*/

.tui-outline-hover {
	opacity: 0.6;
}

.tui-circle-btn {
	border-radius: 40rpx !important;
}

/*#ifndef APP-NVUE*/
.tui-circle-btn::after {
	border-radius: 80rpx !important;
}
/*#endif*/
</style>
